<script setup>
import { merge } from 'lodash-es';
import { useWatch } from '@/hooks/useWatch.js';
import { useDictLists } from '@/hooks/tool.js';
const props = defineProps({
  formData: { type: Object, default: () => ({}) },
  showSave: { type: Boolean, default: false },
});
const emit = defineEmits(['handleSave', 'withDraw']);
const { showSave } = toRefs(props);
const dictTypes = [
  'building_type',
  'led_saving_energy',
  'lights_usage',
  'winter_heating_mode',
  'summer_cooling_mode',
  'aircondition_fc_gc_run',
];
const dictLists = useDictLists(dictTypes);
const form = ref(null);
const queryParams = ref({
  constructionCompletionTime: '', //项目建筑竣工年份
  constructionFloors: '', //项目建筑最高层数
  constructionNum: '', //项目建筑数量
  empNum: '', //办公人数
  constructionArea: '', //项目建筑面积
  roofArea: '', //屋顶可用面积
  constructionType: [], //建筑类型
  isEnergyAudit: '', //是否开展过能源审计
  isHasPvSystem: '', //屋顶是否安装光伏发电系统
  ledSavingEnergy: [], //LED照明节能改造情况
  lightsUsage: [], //办公室亮灯情况
  winterHeatingMode: [], //冬季供暖形式：
  summerCoolingMode: [], //夏季供冷形式：
  airconditionIsFcGc: '', //中央空调系统是否做过变频群控等节能改造：
  airconditionFcGcRun: [], //空调变频群控系统运行情况：
  airconditionFcGcCompletionTime: '', //中央空调系统节能改造完成年月
  remark: '',
});
const constructionType = ref([]); //建筑类型
const isEnergyAudit = ref([]); //是否开展过能源审计
const isHasPvSystem = ref([]); //屋顶是否安装光伏发电系统
const ledSavingEnergy = ref([]); //LED照明节能改造情况
const lightsUsage = ref([]); //办公室亮灯情况
const winterHeatingMode = ref([]);
const summerCoolingMode = ref([]);
const airconditionFcGcRun = ref([]);

const withDraw = () => {
  emit('withDraw');
};
const changeConstructionType = val => {
  queryParams.value.constructionType = val + '';
  if (showSave.value) form.value.validateField('constructionType');
};
const changeLedSavingEnergy = val => {
  queryParams.value.ledSavingEnergy = val + '';
  if (showSave.value) form.value.validateField('ledSavingEnergy');
};
const changeLightsUsage = val => {
  queryParams.value.lightsUsage = val + '';
  if (showSave.value) form.value.validateField('lightsUsage');
};
const changeWinterHeatingMode = val => {
  queryParams.value.winterHeatingMode = val + '';
  if (showSave.value) form.value.validateField('winterHeatingMode');
};
const changeSummerCoolingMode = val => {
  queryParams.value.summerCoolingMode = val + '';
  if (showSave.value) form.value.validateField('summerCoolingMode');
};
const changeAirconditionFcGcRun = val => {
  queryParams.value.airconditionFcGcRun = val + '';
  if (showSave.value) form.value.validateField('airconditionFcGcRun');
};
const handleSave = () => {
  if (showSave.value) {
    form.value.validate(valid => {
      if (valid) {
        emit('handleSave', queryParams.value);
        // queryParams.value = {
        //   constructionCompletionTime: '', //项目建筑竣工年份
        //   constructionFloors: '', //项目建筑最高层数
        //   constructionNum: '', //项目建筑数量
        //   empNum: '', //办公人数
        //   constructionArea: '', //项目建筑面积
        //   roofArea: '', //屋顶可用面积
        //   constructionType: [], //建筑类型
        //   isEnergyAudit: '', //是否开展过能源审计
        //   isHasPvSystem: '', //屋顶是否安装光伏发电系统
        //   ledSavingEnergy: [], //LED照明节能改造情况
        //   lightsUsage: [], //办公室亮灯情况
        //   winterHeatingMode: [], //冬季供暖形式：
        //   summerCoolingMode: [], //夏季供冷形式：
        //   airconditionIsFcGc: '', //中央空调系统是否做过变频群控等节能改造：
        //   airconditionFcGcRun: [], //空调变频群控系统运行情况：
        //   airconditionFcGcCompletionTime: '', //中央空调系统节能改造完成年月
        //   remark: '',
        // };
        constructionType.value = [];
        ledSavingEnergy.value = [];
        lightsUsage.value = [];
        winterHeatingMode.value = [];
        summerCoolingMode.value = [];
        airconditionFcGcRun.value = [];
      } else {
        return false;
      }
    });
  }
};
useWatch(props, n => {
  if (Object.keys(n.formData).length > 0) {
    queryParams.value = merge(queryParams.value, n.formData);
    queryParams.value.constructionCompletionTime = n.formData.constructionCompletionTime
      ? String(n.formData.constructionCompletionTime)
      : null;
    constructionType.value =
      queryParams.value.constructionType.length > 0 ? queryParams.value.constructionType.split(',') : [];
    ledSavingEnergy.value =
      queryParams.value.ledSavingEnergy.length > 0 ? queryParams.value?.ledSavingEnergy?.split(',') : [];
    lightsUsage.value = queryParams.value.lightsUsage.length > 0 ? queryParams.value?.lightsUsage?.split(',') : [];
    winterHeatingMode.value =
      queryParams.value.winterHeatingMode.length > 0 ? queryParams.value?.winterHeatingMode?.split(',') : [];
    summerCoolingMode.value =
      queryParams.value.summerCoolingMode.length > 0 ? queryParams.value?.summerCoolingMode?.split(',') : [];
    airconditionFcGcRun.value =
      queryParams.value.airconditionFcGcRun.length > 0 ? queryParams.value?.airconditionFcGcRun?.split(',') : [];
  } else {
    queryParams.value = {
      constructionCompletionTime: '', //项目建筑竣工年份
      constructionFloors: '', //项目建筑最高层数
      constructionNum: '', //项目建筑数量
      empNum: '', //办公人数
      constructionArea: '', //项目建筑面积
      roofArea: '', //屋顶可用面积
      constructionType: [], //建筑类型
      isEnergyAudit: '', //是否开展过能源审计
      isHasPvSystem: '', //屋顶是否安装光伏发电系统
      ledSavingEnergy: [], //LED照明节能改造情况
      lightsUsage: [], //办公室亮灯情况
      winterHeatingMode: [], //冬季供暖形式：
      summerCoolingMode: [], //夏季供冷形式：
      airconditionIsFcGc: '', //中央空调系统是否做过变频群控等节能改造：
      airconditionFcGcRun: [], //空调变频群控系统运行情况：
      airconditionFcGcCompletionTime: '', //中央空调系统节能改造完成年月
      remark: '',
    };
    constructionType.value = [];
    ledSavingEnergy.value = [];
    lightsUsage.value = [];
    winterHeatingMode.value = [];
    summerCoolingMode.value = [];
    airconditionFcGcRun.value = [];
    form?.value?.resetFields();
  }
});
</script>
<template>
  <div>
    <el-form
      :model="queryParams"
      ref="form"
      size="small"
      label-width="320px"
      class="u-mt20 queryForm"
      :disabled="!showSave"
      :inline="true"
    >
      <el-form-item
        label="建筑竣工年份："
        prop="constructionCompletionTime"
        :rules="{ required: true, message: '请输入单位名称', trigger: 'blur' }"
      >
        <el-date-picker
          style="width: 300px"
          v-model="queryParams.constructionCompletionTime"
          type="year"
          value-format="yyyy"
          placeholder="选择年"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="建筑层数："
        prop="constructionFloors"
        :rules="{ required: true, message: '请输入建筑层数', trigger: 'blur' }"
      >
        <el-input
          v-filter-input
          style="width: 180px"
          v-model.trim="queryParams.constructionFloors"
          placeholder="层"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item
        label="建筑数量："
        prop="constructionNum"
        :rules="{ required: true, message: '请输入建筑数量', trigger: 'blur' }"
      >
        <el-input
          v-filter-input
          style="width: 300px"
          v-model.trim="queryParams.constructionNum"
          placeholder="栋"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item
        label="办公人数："
        prop="empNum"
        :rules="{ required: true, message: '请输入办公人数', trigger: 'blur' }"
      >
        <el-input
          v-filter-input
          style="width: 180px"
          v-model.trim="queryParams.empNum"
          placeholder="人/日"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item
        label="建筑面积："
        prop="constructionArea"
        :rules="{ required: true, message: '请输入建筑面积', trigger: 'blur' }"
      >
        <el-input
          v-filter-input
          style="width: 300px"
          v-model.trim="queryParams.constructionArea"
          placeholder="平方米"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item
        label="屋顶可用面积："
        prop="roofArea"
        :rules="{ required: true, message: '请输入屋顶可用面积', trigger: 'blur' }"
      >
        <el-input
          v-filter-input
          style="width: 180px"
          v-model.trim="queryParams.roofArea"
          placeholder="平方米"
          clearable
          size="small"
        />
      </el-form-item>
      <br />
      <el-form-item
        label="建筑类型："
        prop="constructionType"
        :rules="{ required: true, message: '请选择建筑类型', trigger: 'change' }"
      >
        <el-checkbox-group v-model="constructionType" @change="changeConstructionType">
          <el-checkbox v-for="dict in dictLists?.building_type" :label="dict.dictValue" :key="dict.dictValue">
            {{ dict?.dictLabel }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="是否开展过能源审计："
        prop="isEnergyAudit"
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
      >
        <el-radio-group v-model="queryParams.isEnergyAudit">
          <el-radio label="Y">是</el-radio>
          <el-radio label="N">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <br />
      <el-form-item
        label="屋顶是否安装光伏发电系统："
        prop="isHasPvSystem"
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
      >
        <el-radio-group v-model="queryParams.isHasPvSystem">
          <el-radio label="Y">是</el-radio>
          <el-radio label="N">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="LED节能改造情况："
        prop="ledSavingEnergy"
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
      >
        <el-checkbox-group v-model="ledSavingEnergy" @change="changeLedSavingEnergy">
          <el-checkbox v-for="dict in dictLists?.led_saving_energy" :label="dict.dictValue" :key="dict.dictValue">
            {{ dict?.dictLabel }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="办公室亮灯情况："
        prop="lightsUsage"
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
      >
        <el-checkbox-group v-model="lightsUsage" @change="changeLightsUsage">
          <el-checkbox v-for="dict in dictLists?.lights_usage" :label="dict.dictValue" :key="dict.dictValue">
            {{ dict?.dictLabel }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="冬季供暖形式："
        prop="winterHeatingMode"
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
      >
        <el-checkbox-group v-model="winterHeatingMode" @change="changeWinterHeatingMode">
          <el-checkbox v-for="dict in dictLists?.winter_heating_mode" :label="dict.dictValue" :key="dict.dictValue">
            {{ dict?.dictLabel }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="夏季供冷形式："
        prop="summerCoolingMode"
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
      >
        <el-checkbox-group v-model="summerCoolingMode" @change="changeSummerCoolingMode">
          <el-checkbox v-for="dict in dictLists?.summer_cooling_mode" :label="dict.dictValue" :key="dict.dictValue">
            {{ dict?.dictLabel }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <br />
      <el-form-item
        label="中央空调系统是否做过变频群控等节能改造："
        prop="airconditionIsFcGc"
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
      >
        <el-radio-group v-model="queryParams.airconditionIsFcGc">
          <el-radio label="Y">是</el-radio>
          <el-radio label="N">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <br />
      <el-form-item
        label="空调变频群控系统运行情况："
        prop="airconditionFcGcRun"
        :rules="{ required: true, message: '请选择', trigger: 'change' }"
      >
        <el-checkbox-group v-model="airconditionFcGcRun" @change="changeAirconditionFcGcRun">
          <el-checkbox v-for="dict in dictLists?.aircondition_fc_gc_run" :label="dict.dictValue" :key="dict.dictValue">
            {{ dict?.dictLabel }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <br />
      <el-form-item
        label="中央空调系统节能改造完成年月："
        prop="airconditionFcGcCompletionTime"
        :rules="{ required: true, message: '请选择', trigger: 'blur' }"
      >
        <el-date-picker
          v-model="queryParams.airconditionFcGcCompletionTime"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月"
        ></el-date-picker>
      </el-form-item>
      <br />
      <el-form-item prop="remark" label="备注：" :rules="{ max: 200, message: '长度在200字符以内', trigger: 'blur' }">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="queryParams.remark"
          maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div class="u-df-ed u-mr20" :class="!showSave ? 'show-save' : ''">
      <el-button size="small" @click="withDraw" type="primary" plain>取 消</el-button>
      <el-button type="primary" size="small" @click="handleSave">保 存</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.queryForm ::v-deep(.el-textarea__inner) {
  height: 120px;
  width: 850px;
}
.app-dark .queryForm ::v-deep(.el-textarea__inner) {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #262f48;
}
.show-save {
  display: none;
}
.queryForm {
  height: 550px;
  overflow-y: auto;
}
</style>
